<template>
    <figure class="images-block">
        <img :src="imageParmas.imgSrc" width="100%" height="400px">
        <div class="images-block-modal">
            <figcaption>{{ imageParmas.title }}</figcaption>
            <h2>{{ imageParmas.header }}</h2>
            <p>{{ imageParmas.desc }}</p>
            <div @click="seeMore">{{ $t('langObj.more') }}</div>
        </div>
    </figure>
</template>

<script>
export default {
    name:"homeImagesBlock",
    props:['imageParmas'],
    methods: {
        seeMore(){
            this.$emit("seeMore",this.imageParmas.path)
        }
    },
}
</script>

<style lang="scss" scoped>
    .images-block{
        height: 400px;
        background:rgba(0,0,0,1);
        opacity:0.8;
        position: relative;

        .images-block-modal{
            position: absolute;
            width: 50%;
            height: 300px;
            text-align: center;
            background:rgba(255,255,255,1);
            opacity:0.8;
            left:50%;
            top:50%;
            transform: translate(-50%,-50%);

            & > div{
                width: 100px;
                height: 36px;
                line-height: 36px;
                border-radius:18px;
                border:2px solid #C2142F;
                text-align: center;
                margin:30px auto;
                font-size:14px;
                font-weight:400;
                color:#C2142F;
                cursor: pointer;
            }
        }
        figcaption{
            margin:43px 0 20px;
            font-size:12px;
            font-weight:500;
            color:rgba(106,119,136,1);
        }
        h2{
            font-size:32px;
            font-weight: bold;
            color:#000;
        }
        p{
            margin-top:30px;
            font-size:18px;
            font-weight:400;
            color:rgba(51,51,51,1)
        }
        
    }
</style>
